<template>
	<view>
		<view class="signed_title">
			<view class="signed_title_text signed_title_textactive">01.选择银行</view>
			<image class="signed_title_img1" src="../../static/images/signed_02.png"></image>
			<view class="signed_title_text signed_title_textactive">02.添加银行卡</view>
			<image class="signed_title_img1" src="../../static/images/signed_02.png"></image>
			<view class="signed_title_text signed_title_textactive">02.短信验证</view>
		</view>
		<view class="signed_set_box">
			<view class="signed_set">
				<view class="signed_set_name">手机号：</view>
				<input class="signed_set_int" type="number" v-model="phonenumber" placeholder="请输入手机号" />
			</view>
			<view class="signed_set">
				<view class="signed_set_name">验证码：</view>
				<input class="signed_set_int" type="number" v-model="codenumber" placeholder="请输入验证码" />
				<!-- <view class="signed_set_btn" @click="getauthcode" v-if="authcodetype">验证码</view>
				<view class="signed_set_btnactive" v-else>{{authcodenumber}}S</view> -->
			</view>
			<view class="signed_text">
				<u-checkbox v-model="protocol" shape="circle" active-color="#E9B461">
					<view>本人已阅读并同意签署<span v-for="item in list" @click="jumpxieyi(item.id)">《{{item.title}}》</span></view>
				</u-checkbox>
			</view>
				
			<view class="signed_btn" @click="jump">下一步</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				authcodetype:true,
				authcodenumber:120,
				phonenumber:'',
				codenumber:'',
				list:'',
				id:'',
				protocol:false
			}
		},
		onLoad(opt) {
			this.id=opt.id
			this.phonenumber=opt.phonenumber
			this.code=opt.code
			this.getlist()
		},
		methods: {
			getlist(){
				let that=this
				that.$http('user.baofu_agreement', {code:that.code}, '加载中...').then(res => {
					if (res.code === 1) {
						console.log(res.data)
						that.list=res.data.list
					}
				});
			},
			getauthcode(){
				let re = /^1[3,4,5,6,7,8,9][0-9]{9}$/;
				let result = re.test(this.phonenumber);
				if(!result) {
					uni.showToast({
						title: '手机号码格式不正确!',
						icon:'none',
						duration: 2000
					});
					
				}else{
					// uni.showToast({
					// 	title: '验证码已发送!',
					// 	duration: 2000
					// });
					this.authcodetype=false
					this.addtime()
				}
			},
			addtime(){
				let that=this
				if(that.authcodenumber==0){
					this.authcodetype=true
					that.authcodenumber=120
					clearTimeout(that.timeout)
				}else{
					that.authcodenumber-=1
					that.timeout=setTimeout(function(){
						that.addtime()
					},1000)
				}
				
			},
			jump(){
				let that=this
				that.$http('user.confirmSign', {sms_code:that.codenumber,id:that.id}, '加载中...').then(res => {
					if (res.code === 1) {
						console.log(res.data)
						that.list=res.data.list
						uni.showToast({
							title: '签约成功!',
							duration: 2000
						});
					}else if(res.code==201){
						uni.showToast({
							title: '等待审核!',
							duration: 2000
						});
					}else{
						uni.showToast({
							title: '签约失败',
							icon:'none',
							duration: 2000
						});
					}
					this.$Router.replace({
					  path:`/pages/index/user`,
					});
				});
			},
			jumpxieyi(id){
				uni.navigateTo({
					url:'./xieyi?id='+id
				})
			}
		}
	}
</script>

<style lang="scss" >
page{
		background: #fff;
	}
.signed_title{
	height: 92rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #F8F8F8;
	.signed_title_text{
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #BBBBBB;
	}
	.signed_title_textactive{
		color: #222222;
	}
	.signed_title_img1{
		width: 46rpx;
		height: 20rpx;
		margin:0 32rpx;
	}
}
.signed_set_box{
	padding-top: 40rpx;
}
.signed_set{
	width: 686rpx;
	height: 108rpx;
	background: rgba(248,248,248,0.88);
	border-radius: 16rpx;
	margin:0 auto;
	margin-bottom: 24rpx;
	display: flex;
	align-items: center;
	padding:0 24rpx;
	box-sizing: border-box;
	.signed_set_name{
		width: 160rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #111111;
	}
	.signed_set_int{
		font-size: 32rpx;
	}
	.signed_set_btn{
		width: 168rpx;
		height: 76rpx;
		background: #FBB03B;
		border-radius: 20rpx;
		text-align: center;
		line-height: 76rpx;
		font-size: 32rpx;
		font-family: SourceHanSansCN-Regular, SourceHanSansCN;
		font-weight: 400;
		color: #111111;
	}
	.signed_set_btnactive{
		width: 168rpx;
		height: 76rpx;
		background: #DADADA;
		border-radius: 20rpx;
		text-align: center;
		line-height: 76rpx;
		font-size: 32rpx;
		font-family: SourceHanSansCN-Regular, SourceHanSansCN;
		font-weight: 400;
		color: #111111;
	}
}
.signed_text{
	margin:30rpx;
	display: flex;
	align-items: center;
	font-size:24rpx;
	span{
		color:#068EFF;
	}
}
.signed_btn{
	width: 686rpx;
	height: 92rpx;
	background: #FBB03B;
	border-radius: 46rpx;
	margin:0 auto;
	margin-top:40rpx;
	text-align: center;
	line-height: 92rpx;
	font-size: 32rpx;
	font-family: SourceHanSansCN-Medium, SourceHanSansCN;
	font-weight: 500;
	color: #111111;
}
</style>
